<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:include="~{common/header :: commonHead}">
    <title>活动详情</title>
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5 th:text="${null == editable ? '新增活动' : '编辑活动'}"></h5>
                    <div class="ibox-tools">
                    </div>
                </div>

                <div class="ibox-content">
                    <form class="row form-body form-horizontal m-t" method="post" th:action="${null == editable ? '/activity/add' : '/activity/edit'}">
                        <input name="id" th:value="${editable?.id}" style="display: none">
                        <div class="col-md-12 droppable sortable ui-droppable ui-sortable">
                            <div class="form-group draggable ui-draggable dropped" style="position: static;">
                                <label class="col-sm-3 control-label">活动名称：</label>
                                <div class="col-sm-6">
                                    <input type="text" id="activityName" required="required" name="activityName" class="form-control" th:value="${editable?.activityName }" placeholder="请输入活动名称">
                                </div>
                            </div>

                            <div class="form-group draggable ui-draggable dropped" style="position: static;">
                                <label class="col-sm-3 control-label">活动介绍：</label>
                                <div class="col-sm-6">
                                    <textarea id="useRule" class="myEditor" name="activityContent"  th:text="${editable?.activityContent }" placeholder="请输入活动介绍" style="height: 100px" required="required" ></textarea>
                                </div>
                            </div>

                            <div class="form-group draggable ui-draggable dropped" style="position: static;">
                                <label class="col-sm-3 control-label">活动展示位置类型：</label>
                                <div class="col-sm-6">
                                    <select class="form-control" name="placed" >
                                        <option th:selected="${editable?.placed eq 'store'}" value="store">最in活动（商户活动</option>
                                        <option th:selected="${editable?.placed eq 'shoppingMall'}" value="shoppingMall">超级假日（商场活动）</option>
                                        <option th:selected="${editable?.placed eq 'playTown'}" value="playTown">玩转小镇</option>
                                    </select>
                                </div>
                            </div>


                            <div class="form-group draggable ui-draggable dropped" style="position: static;">
                                <label class="col-sm-3 control-label">活动类型：</label>
                                <div class="col-sm-6">
                                    <select class="form-control" name="activityType" id="activitytype-selector">
                                        <option th:selected="${editable?.activityType eq 'theme'}" value="theme">主题活动</option>
                                        <option th:selected="${editable?.activityType eq 'stage'}" value="stage">舞台活动</option>
                                        <option th:selected="${editable?.activityType eq 'apply'}" value="apply">报名活动</option>
                                    </select>
                                </div>
                            </div>

                            <!-- 输入积分值 -->
                            <div class="form-group draggable ui-draggable dropped" th:style="${'position: static; display:' + (editable == null || editable?.activityType eq 'theme' || editable?.activityType eq 'stage' ? 'none' : 'block')}" id="total-peaplenum-input">
                                <label class="col-sm-3 control-label"><span style="color: red;">* </span>参与人数：</label>
                                <div class="col-sm-6">
                                    <input onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')" type="text" name="peopleNum" class="form-control" th:value="${editable?.peopleNum }" placeholder="请输入参与人数">
                                </div>
                            </div>


                            <div class="form-group draggable ui-draggable dropped" style="position: static;">
                                <label class="col-sm-3 control-label">上传活动封面：</label>
                                <div class="col-sm-6">
                                    <div id="add_icons" class="add_icons">
                                        <div class="add_icon_pan">
                                            <input name="upload_pic"
                                                   id="upload_pic" type="file"
                                                   accept="image/*"
                                                   control_id="control_id"
                                                   image_id="image_id"
                                                   class="upload_pic_input"  style="">
                                            <img id="uploaded_pic" th:class="${editable?.coverUrl != null ? '' : 'hide' }"
                                                 th:src="${editable?.coverUrl != null ? editable.coverUrl : ''}"/>
                                            <div th:class="'mark ' + ${editable?.coverUrl != null ? '' : 'hide' }">
                                                <div class="close_icon_button"
                                                     control_id="coverUrl"></div>
                                            </div>
                                            <label for="upload_pic"
                                                   th:class="'add_icon_button ' + ${editable?.coverUrl != null ? 'hide' : ''}"></label>
                                        </div>
                                    </div>
                                    <label class="help-block">像素比例  16:9，尺寸720*405</label>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-lg-2 col-md-4 col-sm-12 control-label" for="control_id"></label>
                                <div class="col-lg-4 col-md-8 ">
                                    <input class="form-control" id="control_id" name="coverUrl" type="text" th:value="${editable?.coverUrl}" style="display: none;">
                                    <input class="form-control" id="image_id" name="imageId" type="text" th:value="${editable?.imageId}" style="display: none;">

                                </div>
                            </div>
                            <div class="form-group draggable ui-draggable dropped"  style="position: static;">
                                <label class="col-sm-3 control-label">活动开始时间：</label>
                                <div class="col-sm-2">
                                    <div class="input-group date">
                                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                        <input type="text" class="form-control" readonly placeholder="开始时间" id="buy_time_start" th:value="${editable?.startTime}" name="startTime" required>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group draggable ui-draggable dropped" style="position: static;">
                                <label class="col-sm-3 control-label">活动结束时间：</label>
                                <div class="col-sm-2">
                                    <div class="input-group date">
                                        <span class="input-group-addon"><i class="fa fa-calendar"></i></span>
                                        <input type="text" class="form-control" th:value="${editable?.endTime }" readonly placeholder="结束时间" id="buy_time_end" name="endTime" required="required">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group draggable ui-draggable dropped" style="position: static;">
                                <label class="col-sm-3 control-label">活动举办地址：</label>
                                <div class="col-sm-6">
                                    <input type="text" name="position" class="form-control" th:value="${editable?.position }" placeholder="请输入文本" required="required">

                                </div>
                            </div>

                            <div class="form-group draggable ui-draggable dropped" style="position: static;" >
                                <label class="col-sm-3 control-label">活动报名否送优惠券：</label>
                                <div class="col-sm-6">
                                    <div class="radio radio-info radio-inline">
                                        <input type="radio" id="inlineRadio3" name="sendCoupon" value="1" th:checked="${editable?.sendCoupon == 1}">
                                        <label for="inlineRadio3">是 </label>
                                    </div>
                                    <div class="radio radio-danger radio-inline">
                                        <input type="radio" id="inlineRadio4" name="sendCoupon" value="0" th:checked="${editable?.sendCoupon == 0}">
                                        <label for="inlineRadio4">否 </label>
                                    </div>
                                </div>
                            </div>




                            <div class="form-group draggable ui-draggable dropped" id="coupon_ids"
                                 th:style="${'position: static; display:' + (editable?.sendCoupon == 1 ? 'block' : 'none')}">
                                <label class="col-sm-3 control-label">活动报名赠送优惠券：</label>
                                <div class="col-sm-6">
                                    <select  id="orgId2" name="couponId" data-placeholder="请选择赠送优惠券..."
                                            class="chosen-select form-control m-b" tabindex="1">
                                        <option value="" th:selected="${editable?.couponId == null}">--请选择(注：此处显示为已下架优惠券)--</option>
                                        <option class="id_option" hassubinfo="true"
                                                th:each="couponDTO:${couponDTOS}"
                                                th:selected="${editable?.couponId == couponDTO.id}"
                                                th:value="${couponDTO.id }"
                                                th:text="${couponDTO.name}"></option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group draggable ui-draggable dropped" style="position: static;">
                                <label class="col-sm-3 control-label">是否热门：</label>
                                <div class="col-sm-6">
                                    <label class="radio-inline">
                                        <input type="radio" th:checked="${editable?.recommend == 1 || editable == null}" value="1" name="recommend">是
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" th:checked="${editable?.recommend == 0}" value="0"  name="recommend">否
                                    </label>
                                </div>
                            </div>


                            <div class="form-group draggable ui-draggable dropped" style="position: static;">
                                <label class="col-sm-3 control-label">是否展示：</label>
                                <div class="col-sm-6">
                                    <label class="radio-inline">
                                        <input type="radio" th:checked="${editable?.show == 0 || editable == null}" value="0" name="show">是
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" th:checked="${editable?.show == 1}" value="1" name="show">否
                                    </label>
                                </div>
                            </div>

                            <div class="form-group draggable ui-draggable dropped" style="position: static;">
                                <label class="col-sm-3 control-label">是否跳转：</label>
                                <div class="col-sm-6">
                                    <div class="radio-inline">
                                        <input type="radio" name="shareState" value="1" th:checked="${editable?.shareState == 1}">是

                                    </div>
                                    <div class="radio-inline">
                                        <input type="radio" name="shareState" value="0" th:checked="${editable?.shareState == 0 || editable == null}">否
                                    </div>

                                </div>
                            </div>
                            <div class="form-group draggable ui-draggable dropped" id="shareUrl" th:style="${'position: static; display:' + (editable?.shareState == 1 ? 'block' : 'none')}" >
                                <label class="col-sm-3 control-label">活动跳转地址：</label>
                                <div class="col-sm-6">
                                    <input type="text"  name="shareUrl" class="form-control" th:value="${editable?.shareUrl }" >
                                </div>
                            </div>

                            <div class="hr-line-dashed"></div>

                            <div class="form-group draggable ui-draggable">
                                <div class="col-sm-12 col-sm-offset-3">
                                    <button class="btn btn-primary" id="submit-btn" type="submit">保存内容</button>
                                </div>
                            </div>

                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $("input[name=activityName]").blur(function () {
        let _this = $(this);
        _this.parent().after('');
        $("#submit-btn").removeAttr('disabled');
        let val = {activityName:$("#activityName").val()};
        $.ajax({
            url:ipDomain+'/quanquan-store/activity/check_activity_name',
            type:'post',
            data: JSON.stringify(val),
            contentType:'application/json',
            success(e){
                if(!e) {
                    _this.parent().after('<p style="color:red;display:inline" id="name-valid">该活动名称已存在</p>');
                    $("#submit-btn").attr('disabled','disabled')
                } else {
                    $("#name-valid").remove();
                }
            }
        })
    })

    $("input[name=shareState]").change(function () {
        let selection = $(this).val();
        if (selection == 1) {
            $("#shareUrl").css('display','block');
        }
        if (selection == ''||selection == 0) {
            $("#shareUrl").css('display','none');
        }
    })

    $("input[name=sendCoupon]").change(function () {
        let selection = $(this).val();
        if (selection == 1) {
            $("#coupon_ids").css('display','block');
            $("#orgId2").attr('required','required');
        }
        if (selection == ''||selection == 0) {
            $("#coupon_ids").css('display','none');
        }
    })

    $("#activitytype-selector").change(function () {
        let selection = $(this).val();
        if (selection == 'theme') {
            $("#total-peaplenum-input").css('display','none');
        }
        if (selection == 'stage') {
            $("#total-peaplenum-input").css('display','none');
        }
        if (selection == 'apply') {
            $("#total-peaplenum-input").css('display','block');
        }
    })

</script>
</body>
</html>